<template>
    <div>
        <header class="header">
            <slot name="header"></slot>
        </header>
        <main class="main">
            <div :key="index" v-for ="(item,index) in data">
                <slot :data="item" :index="index"></slot>
            </div>
        </main>
        <footer class="footer">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { type } from 'os';
import { reactive } from 'vue';
type names = {
    name: string,
    age: number
}

const data = reactive<names[]>([
    {
        name: 'tang',
        age: 12
    },
    {
        name: 'qiao',
        age: 123
    },
    {
        name: 'xing',
        age: 1234
    },
])

</script>

<style scoped>
.header {
    height: 200px;
    background: red;
    color: #fff;
}

.main {
    height: 200px;
    background: green;
    color: #fff;
}

.footer {
    height: 200px;
    background: blue;
    color: #fff;
}
</style>